<script setup >

//设置响应数据
import {reactive,watch} from 'vue'
const state=reactive({
    form:{
        title:'',
        date:''
    },
    list:JSON.parse(localStorage.getItem('list'))||[],
    selected:-1,
    currentIndex:0
})
// 设置删除方法
const onDel=(id)=>{
    state.list=state.list.filter(item=>item.id !== id)
    // localStorage.setItem('list',JSON.stringify(state.list))
}
//设置计算属性
const displayArr=()=>{
    return state.list.slice(state.currentIndex,state.currentIndex+10)
}
//设置响应方法
const onScroll=(e)=>{
    const scrollTop=e.target.scrollTop
    state.currentIndex=Math.floor(scrollTop/30)
}
const onSubmit=()=>{
    if(state.selected===-1){
        state.list.push({...state.form,id:Date.now()+Math.floor(Math.random()*1000)})
    }else{
        state.list[state.selected]={...state.list[state.selected],...state.form}
    }
    state.selected=-1
}
const mock=()=>{
    for(let i=0;i<500;i++){
        state.list.push({
            title:i+'',
            date:'2020-01-01',
            id:i+''
        })
    }
}
const onEdit=(index,title,date)=>{
    state.selected=index
    state.form.title=title
    state.form.date=date
}
const handleDragStart=(event,id)=>{
    event.dataTransfer.setData('text/plain',id)
}
const handleDragOver=(event)=>{
    event.preventDefault()
}
const handleDrop=(event,id)=>{
    event.preventDefault()
    const originId=event.dataTransfer.getData('text/plain')
    const originIndex=state.list.findIndex(item=>item.id===originId)
    const targetIndex=state.list.findIndex(item=>item.id===id)
    const item=state.list.splice(originIndex,1)[0]
    state.list.splice(targetIndex,0,item)
}
watch(()=>state.list,(val)=>{
localStorage.setItem('list',JSON.stringify(val))
},{deep:true}
)
</script>
<template>
  <h3>{{ state.selected === -1 ? '添加' : '编辑' }}</h3>
  <form>
      <div>
          <label for="title">标题：</label>
          <input type="text" id="title" v-model="state.form.title">
      </div>
      <div>
          <label for="date">日期：</label>
          <input type="date" id="date" v-model="state.form.date">
      </div>
  </form>
  <button @click="onSubmit">提交</button>
  <button @click="state.selected = -1; state.form.title = ''; state.form.date = ''">开始添加</button>
  <button @click="mock">添加模拟数据</button>
  <table>
      <thead>
          <tr style="display: inline-block;width:300pxs">
              <th>标题</th>
              <th>日期</th>
              <th>操作</th>
          </tr>
      </thead>
      <tbody style="display:block;height: 300px;overflow-y: auto;" @scroll="onScroll">
          <div :style="{ height: state.list.length * 30 + 'px' }">
              <div :style="{ height: state.currentIndex * 30 + 'px' }"></div>
              <tr
               class="trStyle" v-for="(item, index) in displayArr()" 
               :key="item.id" style="height:30px"
               draggable="true"
               @dragstart="handleDragStart($event, item.id)"
               @dragover="handleDragOver"
               @drop="handleDrop($event, item.id)"
               >
                  <td>{{ item.title }}</td>
                  <td>{{ item.date }}</td>
                  <td>
                      <button @click="onEdit(index, item.title, item.date)">修改</button>
                      <button @click="onDel(item.id)">删除</button>
                  </td>
              </tr>
          </div>
      </tbody>
  </table>
</template>
<style>
.trStyle{
  background-color: gray; 
}
</style>






